<!DOCTYPE html>
{% load staticfiles %}
<html>
    <head>
        <meta charset="utf-8">
        <title>校园租 - 首页</title>
        <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="{% static 'css/CampusRenting-LandingPage.css' %}" media="screen" title="no title" charset="utf-8">
    </head>
    <body style="overflow: scroll;">
<!-- - - - - - - - - - - - - - - - - banner - - - - - - - - - - - - - - - - -->
        <div class="ui vertical basic segment banner">
    <!-- - - - - - - - - - - - - masterhead - - - - - - - - - - - - -->
            <div class="ui vertical segment masterhead">
                <div class="ui text menu in-masterhead">
                    <!-- CampusRenting logo-image -->
                    <a class="image-logo in-menu-masterhead" href="{% url 'index' %}">
                        <img src="/static/image/租房项目切图/1首页/logo.png" alt="" />
                    </a>
                    <!-- CampusRenting logo-text -->
                    <a class="text-logo in-menu-masterhead" href="{% url 'index' %}">校园租</a>
                    <!-- right menu -->
                    <div class="ui right text menu in-menu-masterhead">
                        <!-- login -->
                        <a class="text-login in-menu-masterhead" href="{% url 'login' %}">登录</a>
                        <!-- register button -->
                        <a class="ui circular button in-menu-masterhead" href="{% url 'register' %}">
                            <img class="image-key in-menu-masterhead" src="/static/image/租房项目切图/1首页/key_icon.png" alt="" />
                            <span class="text-register in-menu-masterhead">注册</span>
                        </a>
                    </div>
                </div>
            </div>
    <!-- - - - - - - - - - - - - searchpanel - - - - - - - - - - - - -->
    <div class="ui vertical basic segment seachpanel">
            <div class="ui container searchpanel">
                <div class="ui borderless menu in-searchpanel">
                    <!-- searchbox -->
                    <!-- 动态传值到 list 时间来不及了 记录下-->
                    <!-- <from action="{% url 'list'%}" method="post"></from>-->
                    <div class="ui search selection dropdown in-searchpanel" >
                        <div class="ui form" >
                            <div class="field">
                                <select style="height: 63px;-moz-appearance: none;-webkit-appearance: none;">
                                    <option value="2">清华大学</option>
                                    <option value="1">北京大学</option>
                                    <option value="0">北京五道口男子篮球学院</option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <!-- searchbutton -->
                    <div class="ui button in-searchpanel">
                        搜索
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- - - - - - - - - - - - - - - displaywindow - - - - - - - - - - - - - - -->
        <div class="ui vertical basic segment displaywindow">
            <div class="ui container displaywindow">
                <!-- first row -->
                <!-- 应该用houseinfo的数据进行填充 做成动态的 时间来不及了 记录下-->
                <h1 class="ui header in-displaywindow">精选优质房源</h1>
                <div class="ui three column grid in-displaywindow">
                    <!-- first item -->
                    <div class="column in-displaywindow">
                        <div class="ui card in-displaywindow">
                            <a class="image in-card">
                                <a class="label in-card">温馨两居</a>
                                <img src="/static/image/租房项目切图/1首页/img1.png" alt="" />
                            </a>
                            <div class="content in-card">
                                <a class="header in-card" href="{%url 'list' %}">人民大学附近房源</a>
                                <div class="ui divider in-card"></div>
                                <div class="description in-card">
                                    宇宙中心五道口附近，方便出行、购物，适合陪读、考研、校外住宿。
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- second item -->
                    <div class="column in-displaywindow">
                        <div class="ui card in-displaywindow">
                            <a class="image in-card">
                                <a class="label in-card">朝南</a>
                                <img src="/static/image/租房项目切图/1首页/img2.png" alt="" />
                            </a>
                            <div class="content in-card">
                                <a class="header in-card" href="{% url 'list' %}">清华大学附近房源</a>
                                <div class="ui divider in-card"></div>
                                <div class="description in-card">
                                    宇宙中心五道口附近，方便出行、购物，适合陪读、考研、校外住宿。
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- third item -->
                    <div class="column in-displaywindow">
                        <div class="ui card in-displaywindow">
                            <a class="image in-card">
                                <a class="label in-card">舒适一居</a>
                                <img src="/static/image/租房项目切图/1首页/img3.png" alt="" />
                            </a>
                            <div class="content in-card">
                                <a class="header in-card" href="{% url 'list' %}">北京大学附近房源</a>
                                <div class="ui divider in-card"></div>
                                <div class="description in-card">
                                    宇宙中心五道口附近，方便出行、购物，适合陪读、考研、校外住宿。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- second row -->
                <h1 class="ui header in-displaywindow">毗邻学校周边</h1>
                <div class="ui three column grid in-displaywindow">
                    <!-- first item -->
                    <div class="column in-displaywindow">
                        <div class="ui card in-displaywindow">
                            <a class="image in-card">
                                <img src="/static/image/租房项目切图/1首页/img4.png" alt="" />
                            </a>
                            <div class="content in-card">
                                <a class="header in-card" href="{% url 'list' %}">北京大学附近房源</a>
                                <div class="ui divider in-card"></div>
                                <div class="description in-card">
                                    宇宙中心五道口附近，方便出行、购物，适合陪读、考研、校外住宿。
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- second item -->
                    <div class="column in-displaywindow">
                        <div class="ui card in-displaywindow">
                            <a class="image in-card">
                                <img src="/static/image/租房项目切图/1首页/img5.png" alt="" />
                            </a>
                            <div class="content in-card">
                                <a class="header in-card" href="{% url 'list' %}">清华大学附近房源</a>
                                <div class="ui divider in-card"></div>
                                <div class="description in-card">
                                    宇宙中心五道口附近，方便出行、购物，适合陪读、考研、校外住宿。
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- third item -->
                    <div class="column in-displaywindow">
                        <div class="ui card in-displaywindow">
                            <a class="image in-card">
                                <img src="/static/image/租房项目切图/1首页/img6.png" alt="" />
                            </a>
                            <div class="content in-card">
                                <a class="header in-card" href="{% url 'list' %}">北京邮电大学附近房源</a>
                                <div class="ui divider in-card"></div>
                                <div class="description in-card">
                                    宇宙中心五道口附近，方便出行、购物，适合陪读、考研、校外住宿。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!-- - - - - - - - - - - - - - - - - footer - - - - - - - - - - - - - - - - -->
        <div class="ui vertical segment footer">
            <div class="ui container footer">
                <div class="ui grid footer">
                    <!-- firt column -->
                    <div class="four wide column in-footer">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">关于我们</h3>
                            </div>
                            <div class="item in-menu-footer">常见问题</div>
                            <div class="item in-menu-footer">联系我们</div>
                            <div class="item in-menu-footer">加入我们</div>
                        </div>
                    </div>
                    <!-- second column -->
                    <div class="four wide column in-footer" style="padding-left: 31px;">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">热门房源</h3>
                            </div>
                            <div class="item in-menu-footer">北京大学</div>
                            <div class="item in-menu-footer">清华大学</div>
                            <div class="item in-menu-footer">人民大学</div>
                            <div class="item in-menu-footer">北京邮电</div>
                        </div>
                    </div>
                    <!-- third column -->
                    <div class="four wide column in-footer" style="padding-left: 62px;">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">关注我们</h3>
                            </div>
                            <div class="item in-menu-footer">关注微信</div>
                            <div class="item in-menu-footer">关注微薄</div>
                            <div class="item in-menu-footer">关注头条号</div>
                            <div class="item in-menu-footer">关注知乎</div>
                        </div>
                    </div>
                    <!-- fourth column -->
                    <div class="four wide column in-footer" style="padding-left: 93px;">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">反馈问题</h3>
                            </div>
                            <div class="item in-menu-footer" style="line-height: 150%;">
                                欢迎写邮件向我们反馈<br />
                                邮箱地址：<br />
                                hi@mugglecoding.com
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui divider in-footer"></div>
                <div class="text-left in-footer">
                    Developed by Mugglecoding team catcuts
                </div>
                <div class="text-right in-footer">
                    京ICP备15047012号-2
                </div>
            </div>
        </div>
    </body>
</html>
